<template>
  <div class="app-container">
    <div class="top">
      <div class="operate"></div>
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="68px"
      >
        <el-form-item prop="searchValue">
          <el-input
            v-model="queryParams.searchValue"
            size="small"
            class="search-key"
            placeholder="请输入关键字搜索"
            clearable
          ></el-input>
        </el-form-item>
        <!-- <el-form-item prop="statecode">
          <el-select
            v-model="queryParams.statecode"
            placeholder="请选择状态"
            size="small"
          >
            <el-option
              v-for="item in statecodeOptions"
              :key="item.codevalue"
              :label="item.codename"
              :value="item.codevalue"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <organizationCascader
            :clearData="{
              factory: true,
              workshop: true,
              line: true,
            }"
            :arrData="queryParams"
            :isAllList="true"
            @change="queryParamsChange"
          ></organizationCascader>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table
      ref="Table"
      :data="list"
      tooltip-effect="dark"
      style="width: 100%"
      height="calc(100% - 44px - 50px)"
      v-loading="loading"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="设备编码" prop="equipCode">
        <template slot-scope="{ row }">
          <el-button type="text" @click.stop="handleShowDetail(row)">{{
            row.equipCode
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="设备名称" prop="equipName"></el-table-column>
      <!-- <el-table-column label="供应商" prop="manufacturer"></el-table-column>
      <el-table-column label="设备型号" prop="model"></el-table-column> -->
      <el-table-column label="设备分类" prop="sortcode">
        <template slot-scope="{ row }">
          {{ row.sortcode ? sortcodeLabelMap[row.sortcode] : "" }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="设备状态" prop="statecode">
        <template slot-scope="{ row }">
          {{ row.statecode ? statecodeLabelMap[row.statecode.toString()] : "" }}
        </template>
      </el-table-column> -->
      <el-table-column label="所属工厂">
        <template slot-scope="{ row }">
          {{ row.bizDeptVo ? row.bizDeptVo.deptName : "" }}
        </template>
      </el-table-column>
      <el-table-column label="所属车间">
        <template slot-scope="{ row }">
          {{ row.workshopDto ? row.workshopDto.workshopName : "" }}
        </template>
      </el-table-column>
      <el-table-column label="所属产线">
        <template slot-scope="{ row }">
          {{
            row.erpProductionLineDto
              ? row.erpProductionLineDto.erpProductionLineName
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column label="关联工位" prop="workStationNames">
      </el-table-column>
      <el-table-column label="关联工序" prop="sectionNames"> </el-table-column>
      <el-table-column label="设备重要等级" prop="levelName"> </el-table-column>
      <el-table-column label="是否核心设备" prop="coreFlag">
        <template slot-scope="{ row }">
          {{ sys_yes_noLabelMap[row.coreFlag] }}
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right">
        <template slot-scope="{ row }">
          <el-button
            v-hasPermi="['equipMgmt:equipment:edit']"
            type="text"
            @click.stop="handleUpdate(row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="pager.total"
      :page.sync="pager.pageNum"
      :limit.sync="pager.pageSize"
      @pagination="getList"
    />
    <DetailDialog
      :visible.sync="detailDialog.visible"
      :row="detailDialog.row"
      :dictData="dictData"
      :disabled="detailDialog.disabled"
      @refresh="getList"
    ></DetailDialog>
  </div>
</template>
<script>
import organizationCascader from "@/views/components/organizationCascader";
import DetailDialog from "./detailDialog";
import { getEquipList } from "@/api/equipMgmt/equipment";
export default {
  name: "Equipment",
  components: { organizationCascader, DetailDialog },
  dicts: ["equipSortcode", "sys_yes_no"],
  data() {
    return {
      queryParams: {
        searchValue: null,
        // statecode: null,
        factoryDeptCode: null,
        workshopCode: null,
        workshopId: null,
        lineId: null,
      },
      // 设备状态枚举-map形式
      // statecodeLabelMap: {},
      // 设备状态枚举-array形式
      // statecodeOptions: [],
      list: [],
      single: false,
      loading: false,
      pager: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      detailDialog: {
        visible: false,
        row: null,
        disabled: false,
      },
    };
  },
  computed: {
    dictData() {
      return {
        // statecodeLabelMap: this.statecodeLabelMap || {},
        sortcodeLabelMap: this.sortcodeLabelMap || {},
      };
    },
    sortcodeLabelMap() {
      return this.dictToMap(this.dict.equipSortcode);
    },
    sys_yes_noLabelMap() {
      return this.dictToMap(this.dict.sys_yes_no);
    },
  },
  created() {
    // 默认获取第一个工厂-车间-产线
    const results = this.getOwnFirstLine();
    this.queryParams.factoryDeptCode = results[0]?.factoryDeptCode || "";
    this.queryParams.workshopCode = results[1]?.workshopCode || "";
    this.queryParams.workshopId = results[1]?.workshopId || "";
    this.queryParams.lineId = results[2]?.lineId || "";

    this.getList();
  },
  methods: {
    handleSelectionChange(selection) {
      if (selection.length > 1) {
        this.single = false;
      } else if (selection.length == 1) {
        this.single = true;
      } else {
        this.single = null;
      }
    },
    getList() {
      this.loading = true;
      const { pageNum, pageSize } = this.pager;
      const { searchValue, factoryDeptCode, workshopId, lineId } =
        this.queryParams;
      const param = {
        query: {
          searchValue,
          factoryDeptCode,
          workshopId,
          lineId,
        },
        pageNum,
        pageSize,
      };
      getEquipList(param)
        .then((res) => {
          this.list = res.rows;
          this.pager.total = res.total;
          this.loading = false;
        })
        .catch(() => {
          this.list = [];
          this.pager.total = 0;
          this.loading = false;
        });
    },
    queryParamsChange({ factoryDeptCode, workshopCode, workshopId, lineId }) {
      this.queryParams.factoryDeptCode = factoryDeptCode;
      this.queryParams.workshopCode = workshopCode;
      this.queryParams.workshopId = workshopId;
      this.queryParams.lineId = lineId;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        searchValue: null,
        // statecode: null,
        factoryDeptCode: null,
        workshopCode: null,
        workshopId: null,
        lineId: null,
      };
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.detailDialog.row = { ...row };
      this.detailDialog.visible = true;
      this.detailDialog.disabled = false;
    },
    /** 查看详情按钮操作 */
    handleShowDetail(row) {
      this.detailDialog.row = row;
      this.detailDialog.visible = true;
      this.detailDialog.disabled = true;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .top {
  height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  .search-key {
    width: 190px;
  }
  .el-select {
    width: 170px;
  }
}
.pagination-container {
  margin: 0;
}
</style>
